<template>
  <div>

    <x-header :left-options="{showBack: true, backText: ''}" style="">通讯录</x-header>
    <div class="contact_content">
      <search
        v-model="keyword"
        :auto-fixed="false"
        position="fixed"
        top="46px"
        @on-change="filterSearch"
        ref="search"></search>


      <group class="contact-group">
        <cell v-for="(contact, index) in searchResults" :key="index"
              class="cell-link-no-arrow"
              :title="contact.department"
              :link="{name: 'ContactBranch', params:{departmentid: contact.id}}">
          <img slot="icon" class="cell-slot-icon" src="./img/gezx_txl.png">
        </cell>
      </group>

    </div>

  </div>
</template>

<script>
  import { XHeader, Search, Group, Cell } from "vux";
  import { mapGetters } from "vuex";
  import api from "../../api/index";

  export default {
    name: "Contact",
    components: {
      XHeader,
      Search,
      Group,
      Cell
    },
    mounted() {
      // this.$refs.search.setFocus()
      this.searchResults = this.contacts;
    },
    methods: {
      filterSearch(keyword) {
        if (!!keyword) {
          this.searchResults = this.contacts.filter(contact => {
            return contact.department.indexOf(keyword) !== -1;
          });
        } else {
          this.searchResults = this.contacts;
        }
      }
    },
    data() {
      return {
        contacts: [],
        searchResults: [],
        keyword: ""
      };
    },
    //计算属性
    computed: {
      ...mapGetters(["contactList"])
    },
    //
    created() {
      this.$store.dispatch("getContactList");
    },
    //侦听属性
    watch: {
      contactList: function(val) {
        this.contacts = val;
      },
      contacts: function(val) {
        this.searchResults = val;
      }
    }
  };
</script>

<style lang="less">
  .contact_content {
    padding: 2.875rem 0 0;
  }

  .contact-group {
    .cell-link-no-arrow {
      .weui-cell__ft:after {
        content: none !important;
      }
      .cell-slot-icon {
        display: block;
        width: 31/16rem;
        margin-right: 13/16rem;
      }
    }
    .weui-cells {
      margin-top: 0;
    }
  }
</style>
